<template>
	<view class="content">
		<view class="contents">
			<view class="c_top">
			  <ul class="c_ul flex">
				<li  v-for="(item,index) in list" :key="index" @click="gets(item.id)">
					<image :src="item.src" mode="" class="img"></image>
					<p>{{item.title}}</p>
				</li>
			  </ul>
		   </view><!--头部-->
		   <view class="c_center">
			   <view class="c_c_top flex">
			   	<h1>{{text}}</h1>
				<input type="text" value="" placeholder="搜索您的问题" @click="get()"/>
			   </view>
			   <view class="c_c_content">
				   <view class="nav_h flex" >
				    	<span   v-for="(item,index) in content" :key="index" class="flex"  :class="{'active':isActive==index}" @click="tab(index)">{{item.title}}</span>
				   </view> 
					 <ul class="c_nav_li_ul" v-for="(item,index) in content" :key="index" v-if="currentId==index">
						 <li  v-for="(items,indexs) in item.article" :key="indexs" @click="jumpDeatil(item.id)">
							  {{items.content}}
							  </li>
						 </ul>
			   </view>
		   </view><!--中间内容-->
		   
		</view>	
		<view class="c_bottom">
			  <ul class="flex">
				 <li  v-for="(item,index) in bottom" :key="index" @click="open()">
					<image :src="item.src" mode="" class="img1"></image> {{item.text}}
					
				 </li>
			  </ul>
			  <uni-popup ref="popup" :mask-click="false" class="box"  maskClick="true">
			  	<view class="box1">
			  		<p>呼叫</p>
			  		<p>复制</p>
			  		<p>添加到手机通讯录</p>
			  	</view>
			  </uni-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				text:'帮助中心',
				isActive:0,
				index:0,
				currentId:'',
				remnant: "0",
				list:[
					{id:'1',src:'/static/images/center_03.gif',title:'发票服务'},
					{id:'2',src:'/static/images/center_05.gif',title:'省钱会员'},
					{id:'3',src:'/static/images/center_07.gif',title:'订单服务·'},
					{id:'4',src:'/static/images/center_09.gif',title:'车辆认证'}
				],
				content:[
					{
						title:'常见问题',id:'1',
						article:[
							
							{id:'1',content:'如何认证，成为团油认证用户'},
							{id:'2',content:'如何加油'},
							{id:'3',content:'服务费规则'},
							{id:'4',content:'查询我的加油订单'},
							{id:'5',content:'油站开票还是团油开票'},
							{id:'6',content:'开具发票'},
							{id:'7',content:'付错油站\付错金额\付错油号\付错抢号，怎么办'},
							{id:'8',content:'油站不让加油，怎么办'},
							{id:'9',content:'为什么我加油付款的实际金额比加油金额高？'}
						]
					},
					{
						title:'会员问题',id:'2',
						article:[
							{id:'1',content:'如何关闭自动续费'},
							{id:'2',content:'自动续费扣款规则'},
							{id:'3',content:'为什么我买的会员权益未发放'},
							{id:'4',content:'我购买了会员后，为什么没有扣除红包'},
							{id:'5',content:'会员专享红包是使用规则和限制'},
							{id:'6',content:'购买了会员，红包可以退款吗'},
							{id:'7',content:'付错油站\付错金额\付错油号\付错抢号，怎么办'},
							{id:'8',content:'为什么会员的购买价格会不一致？'},
							
						]
					},
					{
						title:'优惠券相关',id:'3',
						article:[
							{id:'1',content:'优惠券使用不了'},
							{id:'2',content:'优惠券未到账'},
							{id:'3',content:'优惠券包没使用完，能退吗'},
							{id:'4',content:'优惠券使用方法'},
							{id:'5',content:'之前购买优惠券包是因为可以在团油APP、小程序使用..'},
							{id:'6',content:'优惠券使用条件'},
							{id:'7',content:'我要优惠'},
							{id:'8',content:'为什么我之前购买的优惠券找不到了？'},
							
						]
					},
					{
						title:'加油常识',id:'4',
						article:[
							{id:'1',content:'如何联系油站'},
							{id:'2',content:'如何能保证油品的质量没有问题'},
							{id:'3',content:'加油过程中频繁跳枪是否影响加油多少'},
							
							
						]
					}
				],
				bottom:[
					{id:'1',src:'/static/images/center_16.gif',text:'电话客服'},
					{id:'2',src:'/static/images/center_19.gif',text:'在线客服'}
				]
			}
		},
		methods:{
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			descInput: function(e) {
				console.log(e)
				this.remnant = e.detail.cursor
			},
			tab:function(index){
				this.isActive = index
				this.currentId = index
			},
			//搜索页面
			get:function(){
				uni.navigateTo({
					url: './sanji/sousuo',
					success: res => {
						console.log(1)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//详情
			jumpDeatil:function(id){
				uni.navigateTo({
					url: './sanji/center-detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转
			gets:function(id){
				if (id ==1){
					uni.navigateTo({
						url: './sanji/fapiao',		
					});
				}else if ( id ==2){
					uni.switchTab({
						url: '../save/save',		
					});
				}else if(id ==3){
					uni.switchTab({
						url: '../order/order',		
					});
				}else{
					uni.navigateTo({
						url: '../index/authentication',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	$color1:#f2f4f8;
	$color2:#4c4c4c;
	$border-radius:20rpx;
	page{background-color: #f2f4f8;overflow: auto;}
	.contents{width: 95%;margin: 0 auto;}
	*{margin: 0;padding: 0;}
	.box1{background-color: #fff;width:600rpx;margin: 0 auto;}
	.box1 p{border-bottom:#ccc 1px solid;color: #666;padding:20rpx;}
	.img1{display: inline-block;width:40rpx;height: 40rpx;vertical-align: middle;}
	.img{display: block;width:70rpx;height: 70rpx;vertical-align: middle;margin: 0 auto;}
	.flex{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;align-items: center;}
	// 头部
	.c_top{margin: 10rpx auto;background-color: #fff;border-radius: $border-radius;padding: 20rpx 100rpx 40rpx 20rpx;box-sizing: border-box;text-align: center;}
	.c_top li{width: 25%;}
	.c_top p{color:#4c4c4c;font-size: 26rpx;margin: 20rpx 0;}
	//中间tab
	.c_center{padding: 20rpx;background-color: #fff;border-radius: $border-radius;box-sizing: border-box;overflow: auto;}
	.c_c_top{padding: 20rpx 15rpx;border-bottom: 5rpx solid $color1;}
	 .c_c_top h1{font-size: 35rpx;font-weight: bold;}
	 .c_c_top input{display: block;width:350rpx;outline: none;border-radius: $border-radius;background-color: $color1;color: $color2;height: 60rpx;text-indent: 2em;background: url(/static/搜索.png) left no-repeat #f2f4f8;}
	 .c_nav_li_ul{height: 700rpx;color: $color2;}
	 .nav_h{padding: 15rpx;border-bottom: 5rpx solid $color1;}
	 .nav_h span{width: 24%;line-height: 60rpx;border-radius: 12rpx;background-color: $color1;font-size: 26rpx;height: 60rpx;text-align: center;display: inline-block;}
	 .active{color: #eb2b30;background-color: #fff0f1;}
	 .c_nav_li_ul li {line-height: 80rpx;}
	 .c_bottom {margin: 20rpx 0rpx;width: 100%;background-color: $color1;padding: 20rpx;box-sizing: border-box;}
	 .c_bottom  ul li{width: 45%;line-height: 80rpx;border-radius: 30rpx;background-color: #e6e9f3;color: $color2;text-align: center;}
	 .c_bottom  ul li:last-child{background-color: #f86550;color: #fff;}
</style>